import Head from 'next/head';
import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable';
import ColumnOptionsTable from '../../../components/prop-tables/ColumnOptionsTable';
import StateOptionsTable from '../../../components/prop-tables/StateOptionsTable';

<Head>
  <title>
    {'Accessibility / Keyboard Navigation Guide - Material React Table V3 Docs'}
  </title>
  <meta
    name="description"
    content="How to use and customize the accessibility and keyboard navigation features of Material React Table"
  />
</Head>

## Accessibility / Keyboard Navigation Guide

Material React Table tries to get the basics of data grid accessibility right out of the box. But since you can easily add event handlers to just about any interaction inside of the table, you can heavily customize the accessibility of your table to your needs too.

### Relevant Table Options

<TableOptionsTable onlyOptions={new Set(['enableKeyboardShortcuts'])} />

### Keyboard Navigation

> New in v3

Material React Table V3 introduces a new table option that is `true` by default: `enableKeyboardShortcuts`

#### `enableKeyboardShortcuts`

This option enables the following keyboard shortcuts:

- `Tab` - Moves the focus to the next cell or element in the table (standard browser behavior)
- `Arrow Up` - Moves the focus 1 cell up
- `Arrow Down` - Moves the focus 1 cell down
- `Arrow Left` - Moves the focus 1 cell left
- `Arrow Right` - Moves the focus 1 cell right
- `Home` - Moves the focus to the first cell in the current row
- `End` - Moves the focus to the last cell in the current row
- `Page Up` - Moves the focus to the first cell in the current column
- `Page Down` - Moves the focus to the last cell in the current column
- `Ctrl/Cmd + Home` - Moves the focus to the first cell in the table (top left in left-to-right languages)
- `Ctrl/Cmd + End` - Moves the focus to the last cell in the table (bottom right in left-to-right languages)
- `Enter` - Performs certain actions in the currently focused cell such as sorting, row selection, row expansion, row pinning, etc.
- `Space` - Also performs certain actions in the currently focused cell such as sorting, row selection, row expansion, row pinning, etc.
- `Ctrl/Cmd + Enter` - Opens column actions menu on a header
- `Escape` - Exits full screen mode

A `tabIndex={0}` is also automatically added to all cells, headers, and footers when `enableKeyboardShortcuts` is enabled to allow for keyboard focus.

### Custom Keyboard Shortcuts

You do not have to use the provided keyboard shortcuts. You can turn off `enableKeyboardShortcuts` and add your own keyboard shortcuts using the `onKeyDown` event handler on all of the table cells (or any other element).

You can also add custom focus styles to any element using the `sx` prop.

```tsx
const table = useMaterialReactTable({
  columns,
  data,
  //add custom keyboard shortcuts
  defaultColumn: {
    //header
    muiTableHeadCellProps: {
      onKeyDown: (event) => {
        if (event.key === 't' && event.metaKey) {
          alert('You pressed the custom shortcut!');
        }
      },
      tabIndex: 0, //allow for keyboard focus
    },
    //body
    muiTableBodyCellProps: {
      onKeyDown: (event) => {
        if (event.key === 't' && event.metaKey) {
          alert('You pressed the custom shortcut!');
        }
      },
      //add custom focus styles
      sx: {
        '&:focus-visible': {
          //or just `&:focus` if you want all focus events to be visible
          outline: '2px solid red',
          outlineOffset: '-2px',
        },
      },
      tabIndex: 0, //allow for keyboard focus
    },
  },
  enableKeyboardShortcuts: false, //turn off default keyboard shortcuts from MRT
});
```

### Custom Focus Styles

An outline is automatically added to all elements when they are focused. You can easily customize the color of the outline by setting `cellNavigationOutlineColor` property in the `mrtTheme` table option.

```tsx
const table = useMaterialReactTable({
  columns,
  data,
  mrtTheme: {
    cellNavigationOutlineColor 'limegreen'
  }
});
```

Or, of course, you can just use the `sx` props to override any styles you want, just like any other style override in MRT.

```tsx
const table = useMaterialReactTable({
  columns,
  data,
  defaultColumn: {
    muiTableBodyCellProps: {
      sx: {
        '&:focus-visible': {
          outline: '4px solid red',
          outlineOffset: '-4px',
        },
      },
    },
  },
});
```

### Full Screen Mode

Now in V3, a focus trap is applied to the table when in full screen mode. This is to prevent the user from navigating outside of the table when using the arrow keys.

The user can exit full screen mode by pressing `Escape`.

